<template>
    <div>
        <el-menu :default-active="activeIndex" class="el-menu-demo nva_style" mode="horizontal" @select="handleSelect">
            <el-row>
                <el-col :span="3">
                    <div class="grid-content"></div>
                </el-col>
                <el-col :span="12">
                    <h1 class="">个人信息修改</h1>
                </el-col>
                <el-col :span="1">
                    <el-menu-item index="4" @click="uindex()">首页</el-menu-item>
                </el-col>
                <el-col :span="1">
                    <el-menu-item index="4" @click="movies()">电影</el-menu-item>
                </el-col>
                <el-col :span="1">
                    <el-menu-item index="4" @click="books()">图书</el-menu-item>
                </el-col>
                <el-col :span="1">
                    <el-menu-item index="4" @click="musics()">音乐</el-menu-item>
                </el-col>
                <el-col :span="2">
                    <el-submenu index="2">
                        <template slot="title">用户中心</template>
                        <el-menu-item index="2-1" @click="enter()">个人历程</el-menu-item>
                        <el-menu-item index="2-2" @click="edit()">信息修改</el-menu-item>
                        <el-menu-item index="2-3" @click="loginOut()">退出登录</el-menu-item>
                    </el-submenu>
                </el-col>
                <el-col :span="3">
                </el-col>
            </el-row>
        </el-menu>
        <el-row class="er1">
            <el-col :span="3">
                <div class="grid-content"></div>
            </el-col>
            <el-col :span="18">
                <div class="container">
                    <div class="form-box">
                        <el-form ref="form" :model="form" label-width="80px">
                            <el-form-item label="昵称">
                                <el-input v-model="form.name"></el-input>
                            </el-form-item>
                            <el-form-item label="手机号">
                                <el-input v-model="form.telephone"></el-input>
                            </el-form-item>
                            <el-form-item label="性别">
                                <el-select v-model="form.sex" placeholder="请选择">
                                    <el-option key="bbk" label="男" value="bbk"></el-option>
                                    <el-option key="xtc" label="女" value="xtc"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="生日">
                                <el-col :span="11">
                                    <el-date-picker
                                            type="date"
                                            placeholder="选择日期"
                                            v-model="form.birthday"
                                            value-format="yyyy-MM-dd"
                                            style="width: 100%;"
                                    ></el-date-picker>
                                </el-col>

                            </el-form-item>
                            <el-form-item label="地址">
                                <el-input v-model="form.address"></el-input>
                            </el-form-item>
                            <el-form-item label="个人简介">
                                <el-input v-model="form.personalProfile"></el-input>
                            </el-form-item>
                            <el-form-item label="密码">
                                <el-input v-model="form.password"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">表单提交</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </el-col>
            <el-col :span="3">
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'baseform',
    data() {
        return {
            form: {
                name: '',
                telephone:'',
                sex:'',
                birthday:'',
                address:'',
                personalProfile:'',
            }
        };
    },
    methods: {
        loginOut(){
            localStorage.removeItem('telephone');
            this.$message.success('退出成功');
            this.$router.push('/u_login');
        },
        regist(){
            this.$router.push('/u_regist');
        },
        onSubmit() {
            this.$message.success('提交成功！');
        },
        edit(){
            this.$router.push('/u_form');
        },
        enter(){
            // if(isLogin())
            this.$router.push('/u_person');
        },
        uindex(){
            this.$router.push('/');
        },
        movies(){
            this.$router.push('/u_movies');
        },
        books(){
            this.$router.push('/u_books');
        },
        musics(){
            this.$router.push('/u_musics');
        }
    }
};
</script>
